<template>
  <RouteLayout :isSubView="false">
    <AdvancedTable>
      <template #form>
        <a-form class="my-form" layout="inline">
          <a-form-item label="用户名">
            <a-input v-model:value="queryParams.name" placeholder="请输入用户名" />
          </a-form-item>
          <a-form-item>
            <a-button class="mr10" type="primary" @click="query({ pageNo: 1 })">查询</a-button>
            <a-button class="mr10" @click="query({ pageNo: 1, name: ''})">重置</a-button>
            <a-button @click="showDictModel" type="primary">
              <template #icon>
                <PlusCircleOutlined />
              </template>
              新增
            </a-button>
          </a-form-item>
        </a-form>
      </template>
      <template #table>
        <div class="userBox">
          <div class="treeBox" v-show="treeData.length>0">
            <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys" :tree-data="treeData">
            </a-tree>
          </div>
          <div class="treeBox" v-show="treeData.length==0">
            <p>暂无部门</p>
          </div>
          <div class="tableBox">
            <a-table class="my-table" :loading="loading" :row-key="record => record.guid" :row-selection="{
                        selectedRowKeys: selectRowKeys,
                        onChange: selectChange
                    }" @change="tableChange" :pagination="pagination" :columns="columns" :data-source="tableData" :scroll="{ x: '100%' }">
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.key == 'index'">
                  <span>{{ index + 1 }}</span>
                </template>
                <template v-if="column.key == 'operation'">
                  <a href="#">详情</a>
                  <a-divider type="vertical" />
                  <a href="#" @click="handleDetele({ guidComma: record.guid })">删除</a>
                </template>
              </template>
            </a-table>
          </div>
        </div>
      </template>
    </AdvancedTable>
  </RouteLayout>
  <!-- 新增编辑字典 -->
  <dict-form-model ref="dictFormRef" @getList="query({ pageNo: 1, name: ''})"></dict-form-model>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { RouteLayout } from '@/layouts'
import { TableFuns } from '@/mixins/tableFuns'
import { PlusCircleOutlined } from '@ant-design/icons-vue'
import AdvancedTable from '@/components/AdvancedTable.vue'
import DictFormModel from './model/dictFormModel.vue'
import userApi from '@/api/user'
import type { TreeProps } from 'ant-design-vue'
const FetchApi = {
	queryApi: userApi.getPage,
	deleteApi: userApi.deleteUser
} // 请求接口
const queryParams = reactive({ pageNo: 1, pageSize: 10, name: '' }) // 请求列表参数
const dictFormRef = ref<null | InstanceType<typeof DictFormModel>>(null) // 定义新增编辑字典ref

// 引入table公共逻辑
const { tableData, loading, pagination, selectRowKeys, query, tableChange, selectChange, handleDetele } = TableFuns({ FetchApi, queryParams })
const columns = [
	{
		title: '序号',
		dataIndex: 'index',
		key: 'index',
		align: 'center',
		width: 100,
		fixed: true
	},
	{
		title: '姓名',
		align: 'center',
		dataIndex: 'name',
		key: 'name',
		width: 100,
		fixed: true
	},
	{
		title: '年龄',
		align: 'center',
		dataIndex: 'age',
		width: 100,
		key: 'age'
	},
	{
		title: '性别',
		align: 'center',
		dataIndex: 'sex',
		width: 100,
		key: 'sex'
	},
	{
		title: '地址',
		align: 'center',
		dataIndex: 'address',
		width: 100,
		key: 'address'
	},
	{
		title: '学位',
		align: 'center',
		dataIndex: 'degreeType',
		width: 100,
		key: 'degreeType'
	},
	{
		title: '学历',
		align: 'center',
		dataIndex: 'educationType',
		width: 100,
		key: 'educationType'
	},
	{
		title: '毕业院校',
		align: 'center',
		dataIndex: 'schoolGuid',
		width: 100,
		key: 'schoolGuid'
	},
	{
		title: '学校岗位',
		align: 'center',
		dataIndex: 'schoolPositionCode',
		width: 100,
		key: 'schoolPositionCode'
	},
	{
		title: '毕业时间',
		align: 'center',
		dataIndex: 'graduationTime',
		width: 100,
		key: 'graduationTime'
	},
	{
		title: '职业病接害因素',
		align: 'center',
		dataIndex: 'diseaseFactorCode',
		width: 100,
		key: 'diseaseFactorCode'
	},
	{
		title: '邮箱',
		align: 'center',
		dataIndex: 'email',
		width: 200,
		key: 'email'
	},
	{
		title: '入职时间',
		align: 'center',
		dataIndex: 'entryTime',
		width: 100,
		key: 'entryTime'
	},

	{
		title: '班组',
		align: 'center',
		dataIndex: 'groupGuid',
		width: 100,
		key: 'groupGuid'
	},
	{
		title: '身份证',
		align: 'center',
		dataIndex: 'idCard',
		width: 200,
		key: 'idCard'
	},
	{
		title: '是否犯罪',
		align: 'center',
		dataIndex: 'isCrime',
		width: 100,
		key: 'isCrime'
	},
	{
		title: '是否职业卫生接害',
		align: 'center',
		dataIndex: 'isHealth',
		width: 100,
		key: 'isHealth'
	},
	{
		title: '是否关键岗位',
		align: 'center',
		dataIndex: 'isKeyPosition',
		width: 100,
		key: 'isKeyPosition'
	},
	{
		title: '原岗位工龄',
		align: 'center',
		dataIndex: 'originalPositionAge',
		width: 100,
		key: 'originalPositionAge'
	},
	{
		title: '原岗位(职务)',
		align: 'center',
		dataIndex: 'originalPositionCode',
		width: 100,
		key: 'originalPositionCode'
	},
	{
		title: '人员类型',
		align: 'center',
		dataIndex: 'personType',
		width: 100,
		key: 'personType'
	},
	{
		title: '手机号',
		align: 'center',
		dataIndex: 'phone',
		width: 200,
		key: 'phone'
	},
	{
		title: '人员照片地址',
		align: 'center',
		dataIndex: 'photoPath',
		width: 200,
		key: 'photoPath'
	},
	{
		title: '政治面貌',
		align: 'center',
		dataIndex: 'politicsType',
		width: 100,
		key: 'politicsType'
	},
	{
		title: '岗位工龄',
		align: 'center',
		dataIndex: 'positionAge',
		width: 100,
		key: 'positionAge'
	},
	{
		title: '岗位(职务)',
		align: 'center',
		dataIndex: 'positionCode',
		width: 100,
		key: 'positionCode'
	},
	{
		title: '状态',
		align: 'center',
		dataIndex: 'status',
		width: 100,
		key: 'status'
	},
	{
		title: '创建时间',
		align: 'center',
		dataIndex: 'createTime',
		key: 'createTime',
		width: 200
	},
	{
		title: '操作',
		align: 'center',
		key: 'operation',
		width: 150,
		fixed: 'right'
	}
]

const treeData = ref<TreeProps['treeData']>([])
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1'])
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1'])
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1'])

onMounted(() => {
	getTreeMt()
})
// 请求机构树
const getTreeMt = async () => {
	try {
		const res = await userApi.getTree({})
		treeData.value = res.data
	} catch (error) {
		treeData.value = []
	}
}
// 显示model框
const showDictModel = () => {
	dictFormRef['value']?.show()
}
</script>

<style lang="less" scoped>
.userBox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.treeBox {
		min-width: 200px;
		margin-right: 20px;
		p {
			text-align: center;
		}
	}
	.tableBox {
		flex: 1;
		width: 0;
	}
}
</style>
